/**
 * Created by dy on 2017/5/20.
 */
/*
* 结构梳理
* */
//框架
/*
*总体分为
* 1.渲染层
* 2.数据更新层
* 注意:一定要严格区分开两个层级处理的事情,渲染层只负责渲染,不关心数据问题,数据更新层只负责数据更新,不关心如何去渲染
* 严格区分职能
* */
/*
* 动画框架
* 一个最简单的js动画框架
* */
setInterval(function () {
    if(!document.hidden) {//防止离开页面出现bug
        /*
        * 数据渲染层
        * 控制页面数据渲染
        * content 为canvas上下文,getContent('2d')
        * */
        render(content);
        /*
        * 数据更新层
        * 控制底层数据更新
        * */
        update();
    }
},20);